<template>
  <div class="qr-code-wrap">
    <div class="qr-rule-box">点击右上角按钮“ • • • ”分享给好友</div>

    <div class="qr-code-box">
      <vue-qr :logoSrc="config.logo" :text="config.value" class="qr-code-pic" :correctLevel="3" :margin="0"
              :dotScale="0.5"></vue-qr>

      <span class="share-title">分享二维码，邀好友加入门店</span>
    </div>
  </div>
</template>

<script>
  import VueQr from 'vue-qr';

  export default {
    data() {
      return {
        config: {
          value: '',
          logo: this.$route.query.avatar,
          logoMargin: 6
        },
        identity: this.$route.query.identity
      }
    },
    mounted() {
      //门店分享邀请，继续保留传递identity，但需要传递一个标识，表示从门店分享
      let url = window.location.protocol + "//192.168.0.152:8090/login";
      this.config.value = url + "?identity=" + this.identity + "&origin=proxy";
    },
    components: {
      VueQr
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .qr-code-wrap {
    display: flex;
    flex-direction: column;
    .wh(100%, 100%);
    background: linear-gradient(-25deg, rgba(27, 130, 240, 1), rgba(30, 221, 255, 1));
    box-shadow: 0.04rem 0.053rem 0.427rem 0rem rgba(67, 180, 255, 0.29);
    .qr-rule-box {
      text-align: center;
      margin-top: 0.96rem;
      margin-bottom: 0.96rem;
      .size-color(0.427rem, rgba(255, 255, 255, 1));
    }
    .qr-code-box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 0 auto;
      .wh(9.04rem, 9.04rem);
      background: rgba(255, 255, 255, 1);
      border-radius: 0.16rem;

      .qr-code-pic {
        margin-bottom: 0.573rem;
        .wh(6.8rem, 6.8rem);
      }

      .share-title {
        text-align: center;
        .size-color(0.427rem, rgba(153, 153, 153, 1));
      }
    }
  }
</style>
